<template>
  <div class="personPayBox">
    <div class="main">
      <div class="projectInfo">
        <div class="header">
          <img src="../../assets/u318.png" alt="">
          <span class="xmxx">项目信息</span>
        </div>
        <p @click="addressBtn">项目地址<span>厦门市思明区龙虎山路726号501</span></p>
        <p>项目编号<span>XM200608001</span></p>
        <p>项目名称<span>海洋公寓</span></p>
        <p>缴费金额<span>3200</span></p>
      </div>
      <div class="paymentInfo">
        <div>
          <span>缴费方式</span>
          <div>
            <select v-model="payMethod" id="" class="payMethod" @change="payMeth">
              <option value="1">微信支付</option>
              <option value="2">支付宝</option>
              <!-- <option value="3">云闪付</option> -->
            </select>
            <!-- <span class="payMethod">微信支付</span>
            <span class="iconfont iconjiantou-copy-copy arrow"></span> -->
          </div>
        </div>
        <div>
          <span>开具发票</span>
          <div>
            <select name="" v-model="invoice"  id="" class="invoice" @change="selectInvoice">
              <option value="1">开具发票</option>
              <option value="0">不开具发票</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>合计：<span class="yuan">￥</span><span class="amount">3200</span></div>
      <div class="jieSuan" @click="jiesunBtn">结算</div>
    </div>

    <!-- 确认支付弹出框 -->
    <div class="querenBox" :style="{display: payVisible}">
      <div><span class="iconfont iconcha cha" @click="close"></span>缴费详情</div>
      <div class="jine">￥3200</div>
      <div>
        <span>订单信息</span>
        <span>燃气管道安装收费</span>
      </div>
      <div>
        <span @click="goInvoice">立即缴费</span>
      </div>
    </div>
    <!-- 遮盖罩 -->
    <div @click="close" class="cover" :style="{display: payVisible}"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 付款方式
      payMethod: '1',
      // 是否开具发票
      invoice: '1',
      // 立即缴费
      payVisible: 'none'
    }
  },
  created () {},
  methods: {
    payMeth () {
      console.log('qqqq')
      console.log(this.payMethod)
    },
    selectInvoice () {
      console.log(this.invoice)
    },
    close () {
      this.payVisible = 'none'
    },
    jiesunBtn () {
      this.payVisible = 'block'
    },
    addressBtn () {
      this.$router.push('/address')
    },
    goInvoice () {
      this.$router.push('/personalInvoice')
    }
  }

}
</script>

<style lang="less" scoped>
  .personPayBox {
    position: relative;
    font-size: 14px;
    color: #333333;
    height: 100%;
    .main {
      padding: 70px 15px 0 15px;
      font-size: 13px;
    }
  }
  .header {
    margin-bottom: 16px;
  }
  .projectInfo p{
    margin-bottom: 28px;
  }
  .projectInfo span {
    margin-left: 20px;
    color: #666;
  }
  .projectInfo .xmxx {
    margin-left: 10px;
    color: #000;
    vertical-align: top;
  }
  .paymentInfo > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .payMethod {
      color: #4BB633;
      border: 0;

      option {
        border: 0;
        text-align: right;
      }
    }
    .invoice {
      border: 0;
      color: #aaa;
    }
    .arrow {
      margin-left: 10px;
      color: #aaa;
    }
  }
  .payAmount {
    color: #000000;
    .fapiao {
      color: #ccc;
    }
  }
  .footer {
    position: absolute;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    justify-content: flex-end;
    align-items: center;
    margin-right: 35px;
    font-size: 14px;
    border-top: 1px solid #ccc;
    .yuan {
      font-size: 14px;
      color: #FF0000;
    }
    .amount {
      font-size: 20px;
      color: #FF0000;
    }
    .jieSuan {
      width: 70px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      background-color: rgba(245, 158, 14, 1);
      border-radius: 4px;
      margin: 0 40px;
    }
  }
  .querenBox {
    position: absolute;
    z-index: 100;
    width: 266px;
    height: 202px;
    // background-color: #ccc;
    left: 50%;
    transform: translateX(-50%);
    top: 140px;
    > div:nth-child(1) {
      position: relative;
      text-align: center;
      height: 35px;
      line-height: 35px;
      // background-color: pink;
      border-bottom: 1px solid #ccc;

      .cha {
        position: absolute;
        left: 0;
        padding: 0 10px;
        font-size: 14px;
      }
    }
    > div:nth-child(2) {
      height: 80px;
      text-align: center;
      // background-color: lightgreen;
      box-sizing: border-box;
      padding-top: 15px;
      font-size: 28px;
    }
    > div:nth-child(3) {
      display: flex;
      box-sizing: border-box;
      padding: 0 20px;
      margin-bottom: 10px;
      // background-color: #9966CC;
      justify-content: space-between;
      font-size: 13px;
      border-bottom: #ccc;
    }
    > div:nth-child(4) {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 59px;
      span {
        width: 219px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        background-color: #4BB633;
        border-radius: 3px;
      }

    }
  }
  .cover {
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: #F4F4F4;
    opacity: 0.8;
  }

</style>
